/*
 * @Author: xiaosihan 
 * @Date: 2023-08-10 11:24:00 
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2024-10-05 09:30:08
 */

import designEditor from "@/editorComponent/designEditor";
import editorStore from "@/editorComponent/editorStore";
import { message, Spin, Tooltip } from "antd";
import clsx from "clsx";
import { autorun } from "mobx";
import { useEffect, useState } from "react";
import styles from "./toolAnime.module.less";
import templateManageService from "@/api/services/templateManageService";

interface Iprops {
}

// 动漫化
export default function ToolAnime() {

  const [hover, setHover] = useState(false);
  const [visible, setVisible] = useState(false);
  const [disable, setDisable] = useState(false);
  const [loadding, setLoadding] = useState(false);
  const [allowNumber, setAllowNumber] = useState(0);


  useEffect(() => autorun(() => {
    const { activeObjectId, lock } = editorStore;
    setDisable(lock);

    const activeObject = designEditor.fabricCanvas.getActiveObject();
    if (activeObjectId && activeObject && activeObject.type === "image") {
      setVisible(true);
    } else {
      setVisible(false);
    }
  }), []);



  return (
    <Tooltip
      title="动漫化"
      placement="top"
      mouseLeaveDelay={0}
      mouseEnterDelay={0.5}
    >
      <div
        onClick={async () => {
          // const res = await templateManageService.getCutoutCtr();
          // const { allow, restNumber } = res;
          // setAllowNumber(restNumber);
          // if (allow) {
          setLoadding(true);
          // 对当前选中的图片进行动漫化处理
          await designEditor.anime();
          setLoadding(false);
          // } else {
          //     message.warning('动漫化次数已用完！')
          // }
        }}
        onMouseEnter={() => {
          setHover(true);
        }}
        onMouseLeave={() => {
          setHover(false);
        }}
        className={clsx(styles.toolAnime, visible && styles.visible, disable && styles.disable, loadding && styles.hover)}
      >
        {/* 动漫化 {allowNumber > 0 ? `${allowNumber}` : null}{loadding && <Spin className={styles.spin} size="small" />} */}
        {loadding && <Spin className={styles.spin} size="small" />}动漫
      </div>
    </Tooltip>
  );

}